<template>
	<view class="container">
		<view class="inputItem">
			<label for="nameInput">姓名：</label>
			<input id="nameInput" type="text" placeholder="请输入姓名" v-model="appointmentObj.studentName">
		</view>
		<rich-text :nodes="'<br>'"></rich-text>
		<view class="inputItem">
			<label for="nameInput">性别：</label>
			<view class="test">
				<uni-data-select
					placeholder="请选填性别"
					v-model="appointmentObj.gender"
					:localdata="genderList"
				></uni-data-select>
			</view>
			
			</uni-data-select>
			<!-- <input id="nameInput" type="text" placeholder="请输入性别" v-model="appointmentObj.gender"> -->
		</view>
		<rich-text :nodes="'<br>'"></rich-text>
		<view class="inputItem">
			<label for="nameInput">预约时间：</label>
			<!-- <input id="nameInput" type="text" placeholder="请输入预约时间" v-model="appointmentObj.appointmentTime"> -->
			<uni-datetime-picker type="datetime" v-model="appointmentObj.appointmentTime" />
		</view>
		<rich-text :nodes="'<br>'"></rich-text>
		<view class="inputItem">
			<label for="nameInput">预约类型：</label>
			<view class="test">
				<uni-data-select
					placeholder="请选择预约类型"
					v-model="appointmentObj.appointmentType"
					:localdata="range"
				>
				</uni-data-select>
			</view>
			
			<!-- <input id="nameInput" type="text" placeholder="请输入类型"> -->
		</view>
		<rich-text :nodes="'<br>'"></rich-text>
		<view class="inputItem">
			<label for="nameInput">联系方式：</label>
			<input id="nameInput" type="text" placeholder="请输入联系方式" v-model="appointmentObj.contactWay">
		</view>
		<button id="submitBtn" @click="appointmentBtn">确定预约</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 下拉选项,通过后端获取全部可用类型
				range: [],
				// 下拉选项，性别
				genderList:[
					{value:"男",text:"男"},
					{value:"女",text:"女"},
					{value:"未知",text:"未知"}
				],
				// 表单对象，用于添加预约
				appointmentObj:{
					// 名字
					studentName:"",
					// 性别
					gender:"",
					// 预约时间
					appointmentTime:"",
					// 预约类型
					appointmentType:"",
					// 联系电话
					contactWay:""
				}
			};
		},
		mounted(){
			// 调用后端接口获取所有可选的预约类型
			this.getAppointmentTypeList();
		},
		methods:{
			// 点击确定预约按钮
			appointmentBtn(){
				let that = this;
				// 判断输入是否为空
				Object.keys(that.appointmentObj).forEach(key =>{
					if(that.appointmentObj[key] === ""){
						console.log("为空");
						uni.showMsg("请填写完整~");
						throw new Error("!!!用户输入不完整，友善报错!!!");
					}
				});
				// 调用添加预约信息接口
				uni.request({
					url:"http://47.115.220.91:8787/studentPages",
					method:'POST',
					data:this.appointmentObj,
					success(res) {
						if(res.data.code === 1){
							// 提示
							uni.showMsg(res.data.data)
							//清空表单，返回上一个页面
							Object.keys(that.appointmentObj).forEach(key => (that.appointmentObj[key] = ''));
							uni.navigateBack();
						}else{
							uni.showMsg("操作失败,请选择详细预约时间或重试!")
						}
					}
				})
			},
			// 获取所有预约类型
			getAppointmentTypeList(){
				let that = this;
				uni.request({
					url:"http://47.115.220.91:8787/studentPages/getTypes",
					method:'GET',
					success(res) {
						for (let i = 0; i < res.data.data.length; i++) {
							that.range.push({'value':res.data.data[i], 'text':res.data.data[i]})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.test{
		width: 70%;
	}
	
	.uni-selectinput-text.uni-selectinput-placeholder {
		width: 100%;
	}
	
	
	#submitBtn{
		margin-top: 20px;
		width: 80%;
		color: white;
		background-color: #6652ff;
	}
	
	.container{
		margin-top: 10px;
	}
	
	.inputItem{
		display: flex;
		
		label{
			width: 90px;
			text-align: right;
			font-size: 18px;
			line-height: 25px;
			margin-top: 2px;
			position: relative;
			top: 6px;
		}	
		input{
			margin-top: 5px;
			border: solid #7db8ff 1px;
			border-radius: 5px;
			width: 70%;
			height: 30px;
		}
	}
	
	.uni-select__input-placeholder {
	    color: #0b0101;
	    font-size: 16px;
	}
</style>
